<template>
  <div>
    <h1 id="top">班级列表</h1>
    <span id="post-info">提交人数：{{hasPostNum+' / '+count}}</span>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="(childMap,key,index) in map" :key="index" :title="key" :name="key">
        <el-table ref="filterTable" :data="childMap" style="width: 100%">
          <el-table-column
            label="提交/评分日期"
            prop="lastDate"
            sortable
            width="280"
            column-key="lastDate"
          ></el-table-column>
          <el-table-column label="头像" width="180">
            <template slot-scope="scope">
              <img id="avatar" :src="scope.row.avatar" alt />
            </template>
          </el-table-column>
          <el-table-column prop="sname" label="姓名" width="180"></el-table-column>
          <el-table-column label="分数" sortable prop="score"></el-table-column>
          <el-table-column label>
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.postState === '2' && $store.state.user.type === '2'"
                type="primary"
                @click="openComment(scope.row.taskContentId)"
              >批改</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="postState"
            label="提交情况"
            width="100"
            :filters="[{ text: '已打分', value: '1' },{text: '未打分', value: '2'}, { text: '未提交', value: '3' }]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.postState === '3' ? 'danger' : 'success'"
                disable-transitions
              >{{scope.row.postState === '1'?"已打分":scope.row.postState === '2'?"未打分":"未提交"}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>

    <!-- 评分组件 -->
    <TaskComment :taskId="currentTaskId" :visible.sync="visible"></TaskComment>
  </div>
</template>
<script>
import { getTaskPostList } from "@/api/task";
import TaskComment from "./TaskComment";
export default {
  data() {
    return {
      map: {},
      activeName: "",
      visible: false,
      currentTaskId: "",
      count: 0,
      hasPostNum: 0
    };
  },
  mounted() {
    this.getList();
  },
  components: {
    TaskComment
  },
  methods: {
    async getList() {
      const { data: res } = await getTaskPostList(this.$route.query.taskInfoId);
      const resData = res.data.data;
      this.map = resData.dataMap;
      this.count = resData.count;
      this.hasPostNum = resData.hasPostNum;
    },
    formatter(row, column) {
      return row.score;
    },
    filterTag(value, row) {
      return row.postState === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    // 设置同步设置当前作业内容id，放置在进入页面之后还没有赋值给currentTaskId
    async openComment(taskId) {
      await this.setId(taskId);
      this.visible = true;
    },
    setId(taskId) {
      this.currentTaskId = taskId;
    }
  }
};
</script>
<style scoped>
#avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#top {
  margin-bottom: 3em;
}
#post-info {
  position: absolute;
  right: 13em;
  top: 10em;
}
</style>